<template>
  <div>
    <n-modal
      v-if="props.showModal"
      v-model:show="props.showModal"
      :mask-closable="true"
      @update:show="$emit('CheckShowModal', false)"
    >
      <n-card
        style="width: 600px"
        title="添加部门"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
      >
        <template #header-extra>
          <n-button type="error" @click="$emit('CheckShowModal', false)">
            X
          </n-button>
        </template>
        <n-form ref="formRef" :model="model" :rules="rules">
          <n-form-item path="dName" label="部门名称">
            <n-input v-model:value="model.dName" placeholder="请输入部门名称" />
          </n-form-item>
          <n-form-item path="dCount" label="人数">
            <n-input v-model:value="model.dCount" placeholder="请输入人数" />
          </n-form-item>
          <n-form-item path="dAddr" label="门牌号">
            <n-input v-model:value="model.dAddr" placeholder="请输入门牌号" />
          </n-form-item>
          <n-row :gutter="[0, 24]">
            <n-col :span="24">
              <div style="display: flex; justify-content: center">
                <n-button round type="primary" @click="UpdateUserFile">
                  添加
                </n-button>
              </div>
            </n-col>
          </n-row>
        </n-form>
      </n-card>
    </n-modal>

    <n-skeleton v-else text :repeat="2" />
    <n-skeleton text style="width: 60%" />
  </div>
</template>

<script lang="ts" setup>
import { defineProps, ref, reactive, onMounted } from 'vue';
import {addOffice} from "@/api/office";
const formRef = ref();
const emit = defineEmits(['CheckShowModal','reloadpage'])
const props = defineProps({
    showModal: {
        type: Boolean,
        default: false
    }
})

const model = reactive({
    dName: '',
    dCount: '',
    dAddr: '',
    uId:1
})

const rules = {
    dName: [
        {
            required: true,
            message: '请输入部门名称',
            trigger: ['input', 'blur']
        }
    ],
    dCount: [
        {
            required: true,
            message: '请输人数',
            trigger: ['input', 'blur']
        }
    ],
    dAddr: [
        {
            required: true,
            message: '请输入门牌号',
            trigger: ['input', 'blur']
        },
    ]
}

const UpdateUserFile = (e:Event) => {
    e.preventDefault()
    formRef.value.validate((err:any)=>{
        if(err){
            console.log(err)
        }else{
           addOffice(model).then((res:any)=>{
                emit('CheckShowModal',false)
                emit('reloadpage')
            })
        }
    })
}
</script>

<style scoped lang="scss"></style>
